<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:f="http://xmlns.jcp.org/jsf/core"
                xmlns:h="http://xmlns.jcp.org/jsf/html"
                xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
                xmlns:p="http://primefaces.org/ui"
                template="/WEB-INF/template.xhtml">
    <ui:define name="content">
        <div class="Container50 Responsive50">
            <div class="ContainerIndent">
                <div class="ShadowBox whiteback BlueBorderedBox">
                    <div class="Container100">
                        <div class="ContainerIndent">
                            <h1 class="BigTopic">DataGrid</h1>
                            <h:form id="form1">
                                <p:dataGrid var="car"
                                            value="#{dataGridView.cars}"
                                            columns="3"
                                            layout="grid"
                                            rows="9"
                                            paginator="true"
                                            id="cars"
                                            paginatorTemplate="{CurrentPageReport} {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
                                            rowsPerPageTemplate="3,6,9,12,16">

                                    <f:facet name="header">
                                        Cars For Sale
                                    </f:facet>

                                    <p:panel header="#{car.brand}" style="text-align:center">
                                        <h:panelGrid columns="1" style="width:100%">
                                            <h:outputText value="#{car.color}" class="Fs18 FontRalewaySemiBold" />

                                            <h:outputText value="#{car.year}" />

                                            <p:commandButton update=":form1:carDetail" oncomplete="PF('carDialog').show()" title="View Detail" icon="fa fa-car Fs15 white">
                                                <f:setPropertyActionListener value="#{car}" target="#{dataGridView.selectedCar}" />
                                            </p:commandButton>
                                        </h:panelGrid>
                                    </p:panel>

                                </p:dataGrid>

                                <p:dialog header="Car Info" widgetVar="carDialog" modal="true" showEffect="fade" hideEffect="fade" resizable="false">
                                    <p:outputPanel id="carDetail" style="text-align:center;">
                                        <p:panelGrid  columns="2" rendered="#{not empty dataGridView.selectedCar}" columnClasses="label,value">
                                            <f:facet name="header">
                                                <p:graphicImage name="demo/images/car/#{dataGridView.selectedCar.brand}-big.gif"/>
                                            </f:facet>

                                            <h:outputText value="Id:" />
                                            <h:outputText value="#{dataGridView.selectedCar.id}" />

                                            <h:outputText value="Year:" />
                                            <h:outputText value="#{dataGridView.selectedCar.year}" />

                                            <h:outputText value="Color:" />
                                            <h:outputText value="#{dataGridView.selectedCar.color}" style="color:#{dataGridView.selectedCar.color}"/>

                                            <h:outputText value="Price:" />
                                            <h:outputText value="$#{dataGridView.selectedCar.price}" />
                                        </p:panelGrid>
                                    </p:outputPanel>
                                </p:dialog>
                            </h:form>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="Container50 Responsive50">
            <div class="ContainerIndent">
                <div class="ShadowBox whiteback BlueBorderedBox">
                    <div class="Container100">
                        <div class="Container100">
                            <div class="ContainerIndent">
                                <h1 class="BigTopic">DataList</h1>
                                <p:dataList value="#{dataListView.cars1}" var="car" type="ordered">
                                    <f:facet name="header">
                                        Cars For Sale
                                    </f:facet>
                                    #{car.brand}, #{car.year}
                                </p:dataList>
                            </div>
                        </div>
                        <div class="Container100">
                            <div class="ContainerIndent">
                                <h1 class="BigTopic">DataList - Paginator</h1>
                                <h:form id="form2">
                                    <p:dataList value="#{dataListView.cars2}"
                                                var="car"
                                                type="unordered"
                                                itemType="none"
                                                paginator="true"
                                                rows="7"
                                                styleClass="paginated">
                                        <f:facet name="header">
                                            Cars For Sale
                                        </f:facet>
                                        <p:commandLink update=":form2:carDetail" oncomplete="PF('carDialog2').show()" title="View Detail" style="margin-right:10px">
                                            <f:setPropertyActionListener value="#{car}" target="#{dataListView.selectedCar}" />
                                            <i class="fa fa-table gray Fs18" style="margin-top:5px;"/>
                                        </p:commandLink>
                                        <h:outputText value="#{car.brand}, #{car.year}" style="display:inline-block"/>
                                    </p:dataList>

                                    <p:dialog header="Car Info" widgetVar="carDialog2" modal="true" showEffect="blind" hideEffect="explode" resizable="false">
                                        <p:outputPanel id="carDetail" style="text-align:center;">
                                            <p:panelGrid  columns="2" rendered="#{not empty dataListView.selectedCar}" columnClasses="label,value">
                                                <f:facet name="header">
                                                    <p:graphicImage name="demo/images/car/#{dataListView.selectedCar.brand}-big.gif"/>
                                                </f:facet>

                                                <h:outputText value="Id:" />
                                                <h:outputText value="#{dataListView.selectedCar.id}" />

                                                <h:outputText value="Year:" />
                                                <h:outputText value="#{dataListView.selectedCar.year}" />

                                                <h:outputText value="Color:" />
                                                <h:outputText value="#{dataListView.selectedCar.color}" style="color:#{dataListView.selectedCar.color}"/>

                                                <h:outputText value="Price:" />
                                                <h:outputText value="$#{dataListView.selectedCar.price}" />
                                            </p:panelGrid>
                                        </p:outputPanel>
                                    </p:dialog>
                                </h:form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="Container100">
            <div class="ContainerIndent">
                <div class="ShadowBox whiteback BlueBorderedBox">
                    <div class="Container70 Responsive100">
                        <div class="ContainerIndent">
                            <h1 class="BigTopic">PickList</h1>
                            <h:form>
                                <p:growl id="msg" showDetail="true" escape="false" />

                                <p:pickList id="pickList"
                                            value="#{pickListView.cities}"
                                            var="cities"
                                            itemLabel="#{cities}"
                                            itemValue="#{cities}"
                                            effect="bounce"
                                            showSourceControls="true"
                                            showTargetControls="true"
                                            showSourceFilter="true"
                                            showTargetFilter="true"
                                            filterMatchMode="contains">
                                    <f:facet name="sourceCaption">From</f:facet>
                                    <f:facet name="targetCaption">To</f:facet>

                                    <p:ajax event="transfer" listener="#{pickListView.onTransfer}" update="msg" />
                                    <p:ajax event="select" listener="#{pickListView.onSelect}" update="msg" />
                                    <p:ajax event="unselect" listener="#{pickListView.onUnselect}" update="msg" />
                                    <p:ajax event="reorder" listener="#{pickListView.onReorder}" update="msg" />
                                </p:pickList>
                            </h:form>
                        </div>
                    </div>
                    <div class="Container30 Responsive100">
                        <div class="ContainerIndent">
                            <h1 class="BigTopic">OrderList</h1>
                            <h:form>
                                <p:growl id="msgs" showDetail="true" />

                                <p:orderList value="#{orderListView.cities}"
                                             var="city"
                                             controlsLocation="left"
                                             itemLabel="#{city}"
                                             itemValue="#{city}" >
                                    <p:ajax event="select" listener="#{orderListView.onSelect}" update="msgs"/>
                                    <p:ajax event="unselect" listener="#{orderListView.onUnselect}" update="msgs"/>
                                    <p:ajax event="reorder" listener="#{orderListView.onReorder}" update="msgs"/>

                                    <f:facet name="caption">Order List</f:facet>
                                </p:orderList>
                            </h:form>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="Container100">
            <div class="ContainerIndent">
                <div class="ShadowBox whiteback BlueBorderedBox">
                    <div class="Container50 Responsive100">
                        <div class="ContainerIndent">
                            <h1 class="BigTopic">Carousel</h1>
                            <h:form>
                                <p:carousel value="#{carouselView.cars}"
                                            var="car"
                                            headerText="Carousel"
                                            itemStyleClass="carItem"
                                            itemStyle="width:160px;height:150px;text-align:center">
                                    <h:panelGrid columns="2" style="width:100%" columnClasses="label,value">
                                        <h:outputText value="Id:" />
                                        <h:outputText value="#{car.id}" />

                                        <h:outputText value="Year" />
                                        <h:outputText value="#{car.year}" />

                                        <h:outputText value="Color:" />
                                        <h:outputText value="#{car.color}" style="color:#{car.color}"/>

                                        <h:outputText value="Price" />
                                        <h:outputText value="$#{car.price}" />
                                    </h:panelGrid>

                                    <f:facet name="footer">
                                            Carousel Footer
                                    </f:facet>
                                </p:carousel>
                                <style type="text/css">
                                    .carItem {
                                        width:200px;
                                        height:200px;
                                        text-align:center;
                                    }

                                    .carouselAdvanced .carItem {
                                        width: 250px;
                                        height: 195px;
                                    }

                                    .value {
                                        font-weight: bold;
                                    }

                                    .ui-carousel {
                                        display: block;
                                        margin-bottom: 20px;
                                    }
                                </style>
                            </h:form>
                        </div>
                    </div>
                    <div class="Container50 Responsive100">
                        <div class="ContainerIndent">
                            <h1 class="BigTopic">Schedule</h1>
                            <h:form>
                                <p:growl id="messages" showDetail="true" />
                                <p:schedule id="schedule"
                                            value="#{scheduleView.eventModel}"
                                            widgetVar="myschedule"
                                            locale="en_US"
                                            timeZone="GMT+6"
                                            style="max-width:700px;">
                                    <p:ajax event="dateSelect" listener="#{scheduleView.onDateSelect}" update="eventDetails" oncomplete="PF('eventDialog').show();" />
                                    <p:ajax event="eventSelect" listener="#{scheduleView.onEventSelect}" update="eventDetails" oncomplete="PF('eventDialog').show();" />
                                    <p:ajax event="eventMove" listener="#{scheduleView.onEventMove}" update="messages" />
                                    <p:ajax event="eventResize" listener="#{scheduleView.onEventResize}" update="messages" />
                                </p:schedule>
                                <p:dialog widgetVar="eventDialog" header="Event Details" showEffect="clip" hideEffect="clip">
                                    <h:panelGrid id="eventDetails" columns="2">
                                        <h:outputLabel for="title" value="Title:" />
                                        <p:inputText id="title" value="#{scheduleView.event.title}" required="true" />

                                        <h:outputLabel for="from" value="From:" />
                                        <p:inputMask id="from" value="#{scheduleView.event.startDate}" mask="99/99/9999">
                                            <f:convertDateTime pattern="dd/MM/yyyy" timeZone="GMT+2"/>
                                        </p:inputMask>

                                        <h:outputLabel for="to" value="To:" />
                                        <p:inputMask id="to" value="#{scheduleView.event.endDate}" mask="99/99/9999">
                                            <f:convertDateTime pattern="dd/MM/yyyy" timeZone="GMT+2"/>
                                        </p:inputMask>

                                        <h:outputLabel for="allDay" value="All Day:" />
                                        <h:selectBooleanCheckbox id="allDay" value="#{scheduleView.event.allDay}" />

                                        <p:commandButton type="reset" value="Reset" />
                                        <p:commandButton id="addButton"
                                                         value="Save"
                                                         actionListener="#{scheduleView.addEvent}"
                                                         oncomplete="PF('myschedule').update();PF('eventDialog').hide();" />
                                    </h:panelGrid>
                                </p:dialog>
                            </h:form>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="Container100">
            <div class="ContainerIndent">
                <div class="ShadowBox whiteback BlueBorderedBox">
                    <div class="Container100">
                        <div class="ContainerIndent">
                            <h1 class="BigTopic">Tree (Single And Checkbox)</h1>
                            <h:form>
                                <p:panelGrid  columns="2" layout="grid">
                                    <p:tree value="#{treeSelectionView.root1}"
                                            var="doc"
                                            selectionMode="single"
                                            selection="#{treeSelectionView.selectedNode}">
                                        <p:treeNode expandedIcon="ui-icon-folder-open" collapsedIcon="ui-icon-folder-collapsed">
                                            <h:outputText value="#{doc.name}"/>
                                        </p:treeNode>
                                        <p:treeNode type="document" icon="ui-icon-document">
                                            <h:outputText value="#{doc.name}" />
                                        </p:treeNode>
                                        <p:treeNode type="picture" icon="ui-icon-image">
                                            <h:outputText value="#{doc.name}" />
                                        </p:treeNode>
                                        <p:treeNode type="mp3" icon="ui-icon-music">
                                            <h:outputText value="#{doc.name}" />
                                        </p:treeNode>
                                    </p:tree>

                                    <p:tree value="#{treeSelectionView.root3}"
                                            var="doc"
                                            selectionMode="checkbox"
                                            selection="#{treeSelectionView.selectedNodes2}">
                                        <p:treeNode icon="ui-icon-note">
                                            <h:outputText value="#{doc.name}"/>
                                        </p:treeNode>
                                        <p:treeNode type="document" icon="ui-icon-document">
                                            <h:outputText value="#{doc.name}" />
                                        </p:treeNode>
                                        <p:treeNode type="picture" icon="ui-icon-image">
                                            <h:outputText value="#{doc.name}" />
                                        </p:treeNode>
                                        <p:treeNode type="mp3" icon="ui-icon-music">
                                            <h:outputText value="#{doc.name}" />
                                        </p:treeNode>
                                    </p:tree>
                                </p:panelGrid>
                            </h:form>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="Container100">
            <div class="ContainerIndent">
                <div class="ShadowBox whiteback BlueBorderedBox">
                    <div class="Container100">
                        <div class="ContainerIndent">
                            <h1 class="BigTopic">Tree (DragDrop)</h1>
                            <h:form id="form3">
                                <p:growl id="msgs" showDetail="true" />

                                <h:panelGrid columns="3">
                                    <p:tree id="tree5"
                                            value="#{treeDNDView.root1}"
                                            var="node"
                                            selectionMode="single"
                                            selection="#{treeDNDView.selectedNode1}"
                                            draggable="true"
                                            droppable="true"
                                            dragdropScope="demo">
                                        <p:ajax event="dragdrop" listener="#{treeDNDView.onDragDrop}" update=":form3:msgs" />
                                        <p:treeNode>
                                            <h:outputText value="#{node}" />
                                        </p:treeNode>
                                    </p:tree>

                                    <p:graphicImage alt="Transfer"
                                                    value="#{resource['primefaces-ronin:images/left-right-arrow-gray.svg']}"
                                                    style="width:50px;" />

                                    <p:tree id="tree6"
                                            value="#{treeDNDView.root2}"
                                            var="node"
                                            selectionMode="single"
                                            selection="#{treeDNDView.selectedNode2}"
                                            draggable="true"
                                            droppable="true"
                                            dragdropScope="demo">
                                        <p:ajax event="dragdrop" listener="#{treeDNDView.onDragDrop}" update=":form3:msgs" />
                                        <p:treeNode>
                                            <h:outputText value="#{node}" />
                                        </p:treeNode>
                                    </p:tree>
                                </h:panelGrid>
                            </h:form>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="Container50 Responsive50">
            <div class="ContainerIndent">
                <div class="ShadowBox whiteback BlueBorderedBox">
                    <div class="Container100">
                        <div class="ContainerIndent">
                            <h1 class="BigTopic">TreeTable</h1>
                            <h:form>
                                <p:treeTable value="#{ttSelectionView.root1}"
                                             var="document"
                                             selectionMode="single"
                                             selection="#{ttSelectionView.selectedNode}"
                                             style="margin-top:0">
                                    <f:facet name="header">
                                        Single
                                    </f:facet>
                                    <p:column headerText="Name" sortBy="#{document.name}">
                                        <h:outputText value="#{document.name}" />
                                    </p:column>
                                    <p:column headerText="Size">
                                        <h:outputText value="#{document.size}" />
                                    </p:column>
                                    <p:column headerText="Type">
                                        <h:outputText value="#{document.type}" />
                                    </p:column>
                                    <f:facet name="footer">
                                        TreeTable Footer
                                    </f:facet>
                                </p:treeTable>
                            </h:form>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="Container50 Responsive50">
            <div class="ContainerIndent">
                <div class="ShadowBox whiteback BlueBorderedBox">
                    <div class="Container100">
                        <div class="ContainerIndent">
                            <h1 class="BigTopic">TreeTable</h1>
                            <h:form>
                                <p:treeTable value="#{ttSelectionView.root3}"
                                             var="document"
                                             selectionMode="checkbox"
                                             selection="#{ttSelectionView.selectedNodes2}">
                                    <f:facet name="header">
                                        Checkbox
                                    </f:facet>
                                    <p:column headerText="Name">
                                        <h:outputText value="#{document.name}" />
                                    </p:column>
                                    <p:column headerText="Size">
                                        <h:outputText value="#{document.size}" />
                                    </p:column>
                                    <p:column headerText="Type">
                                        <h:outputText value="#{document.type}" />
                                    </p:column>
                                </p:treeTable>
                            </h:form>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="Container100">
            <div class="ContainerIndent">
                <div class="ShadowBox whiteback BlueBorderedBox">
                    <div class="Container100">
                        <div class="ContainerIndent">
                            <h1 class="BigTopic">Horizontal Tree</h1>
                            <h:form>
                                <p:tree value="#{treeSelectionView.root1}"
                                        var="doc"
                                        orientation="horizontal"
                                        selectionMode="single"
                                        selection="#{treeSelectionView.selectedNode}">
                                    <p:treeNode expandedIcon="ui-icon-folder-open" collapsedIcon="ui-icon-folder-collapsed">
                                        <h:outputText value="#{doc.name}"/>
                                    </p:treeNode>
                                    <p:treeNode type="document" icon="ui-icon-document">
                                        <h:outputText value="#{doc.name}" />
                                    </p:treeNode>
                                    <p:treeNode type="picture" icon="ui-icon-image">
                                        <h:outputText value="#{doc.name}" />
                                    </p:treeNode>
                                    <p:treeNode type="mp3" icon="ui-icon-video">
                                        <h:outputText value="#{doc.name}" />
                                    </p:treeNode>
                                </p:tree>
                            </h:form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </ui:define>
</ui:composition>